<!-- 优惠券 -->
<style lang="scss" scoped>
    @import '~@/scss/public.scss';
    @mixin custom-border {
        content: '';
        position: absolute;
        top: 0;
        width: .5rem;
        height: 100%;
        background-size: 1rem .5rem;
        background-position: 100% 35%;
    }
    .coupon {
        position: relative;
        display: inline-flex;
        margin-bottom: 15px;
        width:350px;
        cursor: pointer;

        .custom-border-before{
            @include custom-border();
            left: -0.5rem;
            z-index: 1;
        }
        .custom-border-after{
            @include custom-border();
            right: -0.5rem;
            z-index: 1;
            transform: rotateZ(180deg);
        }

        .tag {
            color: white;
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px;
            position: relative;
        }
        .info {
            border: $ui-border;
            border-left: none;
            padding: 10px;
            flex: 3;
            position: relative;

            .title {
                @include text-clamp(1);
            }
            .sub-title {
                color: rgba(black, 0.3);
                font-size: .6rem;
                display: flex;
                justify-content: space-between;
            }
        }
        .gap{
            width: 1rem;
            height: 1rem;
            border: $ui-border;
            border-radius: 50%;
            border-left: none;
            border-right: none;
            background: white;
            position: absolute;
            z-index: 1;
            right: 0;
            &.gap-top{
                top:0;
                transform: translate3d(50%,-50%,0);
            }
            &.gap-bottom{
                bottom:0;
                transform: translate3d(50%,50%,0);
            }
        }
    }
    .coupon-label{
        margin-bottom: 5px;
    }
</style>
<template>
    <div class="coupon ui-hover-shadow">
        <div class="custom-border-before" :style="{backgroundImage: getCustomBorder}"></div>
        <div class="tag" :style="{background: color}">
            <span class="gap gap-top" style="border-top:none;" :style="{backgroundColor:gapColor}"></span>
            <span class="gap gap-bottom" style="border-bottom:none;" :style="{backgroundColor:gapColor}"></span>
            <div class="f-color-white flex column column-col-around h-100" >
                <div v-if="data.type==1" class="flex column column-col-around column-row-center">
                    <div class="flex coupon-label">
                        <b class="f15 relative"><ui-img :url="data.company_ico" size="45px" class="ui-circle bg-grey"></ui-img></b>
                    </div>
                    <div v-if="couponStyle==1" class="f15">[ 白菜 ]</div>
                    <div class="f16 coupon-time"  style="color:#333">{{data.company_name}}</div>
                </div>
                <div v-if="data.type==2" class="flex column column-col-center column-row-center">
                    <div class="flex coupon-label">
                      <b class="f16 relative"><ui-img :url="data.company_ico" size="45px" class="ui-circle bg-grey"></ui-img></b>
                    </div>
                    <div v-if="couponStyle==1" class="f10">[ 固定存送 ]</div>
                    <div class="f16 coupon-time"  style="color:#333">{{data.company_name}}</div>
                </div>
                <div v-if="data.type==3" class="flex column column-col-center column-row-center">
                    <div class="flex coupon-label">
                        <b class="f15 relative"><ui-img :url="data.company_ico" size="45px" class="ui-circle bg-grey"></ui-img></b>
                    </div>
                    <div v-if="couponStyle==1" class="f10">[ 比例存送 ]</div>
                    <div class="f15 coupon-time"  style="color:#333">{{data.company_name}}</div>
                </div>
            </div>
        </div>
        <div class="info bg-white">
            <div class="flex-1 flex column column-col-around h-100">
                <div v-if="data.type==1">
                  <span class="absolute ui-tag-primary ui-tag-anti" style="left:10px"> 白菜 </span>
                   <span class="f20 relative" style="left:56px;color:#fe6b01">{{Math.round(data.amount)}}元</span>
                </div>
                <div v-if="data.type==2">
                  <span class="absolute ui-tag-primary ui-tag-anti" style="left:10px">  固定存送 </span>
                  <span class="f20 relative" style="left:86px;color:#fe6b01"> 存{{parseInt(data.min)}}送{{parseInt(data.max)}}</span>
                </div>
                <div v-if="data.type==3">
                  <span class="absolute ui-tag-primary ui-tag-anti" style="left:10px">比例存送 </span>
                  <span class="f20 relative" style="left:85px;color:#fe6b01"> 存送{{parseInt(data.scale)}}%</span>
                </div>
                <div v-if="couponStyle==1" class="f10 f-color-grey">
                    <span v-if="data.begin_time && data.end_time">
                        {{data.begin_time.substr(0,10)}} 到 {{data.end_time.substr(0,10)}}
                    </span>
                </div>
                <div v-else class="flex row-between f14 f-color-grey">
                    <div>
                        <img src="~@/icons/person.png" width="20" height="15" >
                        <span style="color:#333">{{data.draw_num}}人领取</span>
                    </div>
                    <div>
                        <span v-if="data.is_cert" class="flex col-center f14" style="color:#2773d2">
                            <img src="~@/icons/verify01_blue.png" width="15" height="16.5" class="mr5"> 已验证<span style="color:#fff">--------</span>
                        </span>
                        <span v-else class="flex col-center f14">
                            <img src="~@/icons/verify01_grey.png" width="15" height="16.5" class="mr5"> 未验证<span style="color:#fff">--------</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 标签
        color:{
            type: String,
            default: '#fff'
        },

        // 镂空部分的颜色
        gapColor: {
            type:String,
            default: '#fff'
        },

        data:{
            type: Object
        }
    },
    data(){
        return {
            couponStyle: this.$route.name =='白菜框'? 1:2//不同页面采用不同的彩金卷样式
        }
    },
    computed:{
        getCustomBorder() {
            return `linear-gradient(-60deg, ${this.color} 25%, transparent 25%, transparent),linear-gradient(-135deg, ${this.color} 25%, transparent 25%, transparent)`
        }
    },
}
</script>
